<!DOCTYPE html>
  <html>
    <head>
      <meta charset="UTF-8">
      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
      <link type="text/css" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
      <link type="text/css" rel="stylesheet" href="css/style.css" />
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <script type="text/javascript">
      $(document).ready(function(){
        $('.modal-trigger').leanModal();
      });
      </script>
    </head>
    <body>

    <nav>
      <div class="nav-wrapper">
        <a href="#" class="brand-logo">Logo</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><a href="#">Trang chủ</a></li>
          <li><a href="#modalRegis" class="modal-trigger">Đăng ký</a></li>
          <li><a href="#modalLogin" class="modal-trigger">Đăng nhập</a></li>
        </ul>
      </div>
    </nav>
    
    <!-- Modal Register -->
    <div id="modalRegis" class="modal modal-fixed-footer">

      <div class="modal-content">
        <h4>Đăng ký tài khoản</h4>
        <div class="row">
          <form class="col s12">
            <div class="row">
              <div class="input-field col s12">
                <input id="email" type="email" class="validate">
                <label for="email">Email</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input id="password" type="password" class="validate">
                <label for="password">Mật khẩu</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input id="password" type="password" class="validate">
                <label for="password">Nhập lại mật khẩu</label>
              </div>
            </div>
            
          </form>
        </div>
        
      </div>

      <div class="modal-footer">
        
        <a href="#" class="waves-effect blue btn modal-action modal-close">Facebook</a>
        <a href="#" class="waves-effect red btn modal-action modal-close">Google</a>
        <a href="#" class="waves-effect green btn modal-action modal-close">Đăng ký</a>
        
      </div>
    </div>

    <!-- Modal login -->
    <div id="modalLogin" class="modal modal-fixed-footer">

      <div class="modal-content">
        <h4>Đăng nhập</h4>
        <div class="row">
          <form class="col s12">
            <div class="row">
              <div class="input-field col s12">
                <input id="email" type="email" class="validate">
                <label for="email">Email</label>
              </div>
            </div>
            <div class="row">
              <div class="input-field col s12">
                <input id="password" type="password" class="validate">
                <label for="password">Mật khẩu</label>
              </div>
            </div>
          </form>
        </div>
        
      </div>

      <div class="modal-footer">
        
        <a href="home.html" class="waves-effect blue btn modal-action modal-close">Facebook</a>
        <a href="home.html" class="waves-effect red btn modal-action modal-close">Google</a>
        <a href="home.html" class="waves-effect green btn modal-action modal-close">Đăng nhập</a>
        
      </div>

    </div>

    </body>
  </html>